<template>
	<view class="main">
		<view class="title-one white">{{ startPage.lineOne.textOne}}<text class="yellow">{{ data.name }}</text>{{ startPage.lineOne.textTwo}}</view>
		<view class="title-two white">
			{{ startPage.lineTwo.textOne }}
			<text class="yellow">{{data.day}}</text>
			{{ startPage.lineTwo.textTwo }}
		</view>
		<view class="btn">
			<image @click="goto" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/my-button.png"></image>
			<text class="white">{{ startPage.lineThree }}</text>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import teacher from '/stateData/teacher.js'
	const { startPage } = teacher
	const data = reactive({
		name:'周韵佳',
		day:381
	})
	const goto = () => {
		uni.redirectTo({
			url:"/pages/teacher/showPage/showPage"
		})
	}
</script>

<style scoped lang="scss">
	@import url(/static/css/style.css);
	.main{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url(http://rjinbysql.hn-bkt.clouddn.com/static/images/tebg-start.png) no-repeat;
		background-size: 100% 100%;
	}
	.title-one{
		font-size: 64rpx;
		font-weight: 400;
		letter-spacing: 4rpx;
		position: absolute;
		top: 28%;
		font-family: '站酷快乐体';
	}
	.title-two{
		width: 80%;
		text-align: center;
		font-size: 56rpx;
		letter-spacing: 4rpx;
		position: absolute;
		top: 40%;
	}
	.btn{
		width: 100%;
		height: 250rpx;
		position: absolute;
		bottom: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 396rpx;
			height: 200rpx;
		}
		text{
			font-size: 28rpx;
			letter-spacing: 4rpx;
		}
	}
</style>
